<template>
  <div>
    <div>
      <!--      <el-date-picker placeholder="开始时间" style="margin-right: 15px" v-model="startdate">大幅度发</el-date-picker>-->
      <!--      <el-date-picker placeholder="结束时间" style="margin-right: 15px" model="enddate">大幅度发</el-date-picker>-->
      <!--      <el-input placeholder="时间间隔" style="margin-right: 15px; width: 200px"></el-input>-->
      <div class="block" style="margin: 10px 0">

        <el-date-picker style="width: 500px; margin-right: 20px"
                        v-model="value_date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>

        <el-select v-model="s_val" placeholder="请选择" style=" margin-right: 20px">
          <el-option
              v-for="item in options_single"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <!--        <el-input v-model="jh" style="width: 200px; margin-right: 20px" placeholder="井号"></el-input>-->
        <el-button type="primary" @click="draw">查询</el-button>
      </div>

    </div>
    <div id="father">


        <div id="qx"
             style="display: block; width: 1600px; height: 300px; background-color: #fbfdff;"></div>


      <!--      <div id="slave" style="display: block; width: 1600px; height: 300px; background-color: #42b983"></div>-->
    </div>

  </div>

</template>

<script>
import * as echarts from 'echarts';
import service from "@/utils/request";
import ElementUI from "element-ui";
import {formatDateTime} from '@/utils/formatDateTime'

export default {
  data() {
    return {
      chart_option: {
        title: {
          text: ''

        },
        // 用dataset设置
        dataset: {
          // dimensions: [{name: 'empno', type: 'number' }, {name: 'ename' },{name: 'job' },{name: 'mgr' },{name: 'hiredate' },{name: 'sal',type: 'number' }],
          // dimensions: [ 'empno', 'ename' , 'job' ,'mgr', 'hiredate','sal', 'comm', 'deptno'],
          source: [
            // ['2020-02-01 10:10:10',100],
            // ['2020-02-01 10:12:10',20],
          ]

        },
        xAxis: {
          type: 'time',
          name: '采集时间',
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
          }

        },
        yAxis: {
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{value}Mpa',
          }
        },


        series: [
          {
            type: 'line',
            encode: {
              x: 'cjsj',
              y: 'yl'
            },
            // label: {
            //   show: true,
            // },
            // emphasis: {
            //   label: {
            //     show: true
            //   }
            // }
          }
        ]
      },
      options_single: [{
        value: '1',
        label: '1分钟'
      }, {
        value: '5',
        label: '5分钟'
      }, {
        value: '30',
        label: '30分钟'
      }, {
        value: '60',
        label: '1小时'
      }, {
        value: '120',
        label: '2小时'
      }],

      s_val: '1',
      user: 'master',
      startdate: new Date(),
      enddate: new Date(),
      value_date: [formatDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss'), formatDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss')],
    }
  },
  methods: {

    draw() {
      let option = {
        xAxis: {
          type: 'category',
          data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            name: '2015',
            data: [20.3, 92.1, 94.4, 200.4]
          },
          {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
          },
          {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
          }
        ]
      };
      var chartDom = document.getElementById('qx');
      var myChart = echarts.init(chartDom);
      myChart.setOption(option);
    },


  }
}
</script>

<style scoped>

</style>